<template>
  <div>
    <h1>商品上架管理(◐‿◑)﻿</h1><hr>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="cropNumbering"
          label="商品编号"
          width="190">
      </el-table-column>
      <el-table-column
          prop="cropName"
          label="商品名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="sysName"
          label="状态"
          width="120">
      </el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.cropNumbering)" type="text" size="small">查看</el-button>
          <el-button @click="openUpdateGoods(scope.row)" type="text" size="small">编辑</el-button>
          <el-button v-if="scope.row.sysName=='待上架'" @click="shangjia(scope.row.id)" type="text" size="small">上架</el-button>
          <el-button v-if="scope.row.sysName=='已上架'" @click="xiajia(scope.row.id)" type="text" size="small">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    打开编辑嵌套表单-->
    <div>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品名称" :label-width="formLabelWidth">
            <el-input v-model="form.cropName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="金额" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancal">取 消</el-button>
          <el-button type="primary" @click="updateGoods">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="二维码" :visible.sync="aa">

      </el-dialog>
    </div>

  </div>
</template>

<script>


export default {
  name: "ShelfView",
  data(){
    return{
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{},
      aa:false,

    }
  },methods:{
    shangjiaList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/shangjiaList").then(res=>{
        console.log(res.data)
        this.tableData=res.data;
      })
    },//打开编辑嵌套表单
    openUpdateGoods(row){
      this.dialogFormVisible=true;
      this.form=row
    },cancal(){
      this.dialogFormVisible=false
    },updateGoods(){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/updateGoods",this.form).then(res=>{
        if(res.data=="success"){
          this.$message.success("编辑成功！！");
          this.dialogFormVisible=false;
          this.shangjiaList();
        }
      })
    },/*上架方法*/
    shangjia(id){
      //alert(id)
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/shangjia?id="+id).then(res=>{
        if(res.data=="success"){
          this.$message.success("上架成功！！");
          this.shangjiaList();
          //根据ID去查询商品上架的表存入二维码地址表
          this.axios.post("http://172.20.10.5:8003/api/pay-plan/makeCode?id="+id).then(res=>{

          })
        }
      })
    },handleClick(cropNumbering){
      this.aa=true;
      this.$router.push({
        path: "/qrcode",
        query: { cropNumbering: cropNumbering },
      });
      //第二中方式
      //this.$router.push("/qrcode?cropNumbering="+cropNumbering)
    },/*下架管理*/
    xiajia(id){
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/xiajia?id="+id).then(res=>{
        if(res.data=="success"){
          this.$message.success("下架成功！！");
          this.shangjiaList();
        }
      })
    }
  },created() {
    this.shangjiaList();
  }
}
</script>

<style scoped>

</style>